<template>
	<div 
		class="md-cell-title"
		:class="[
			type,
			!hasLine ? 'md-cell-no-line': ''
		]"
	>
		<div class="md-cell-title-left">
			<span class="md-cell-title-line" v-if="hasLine"></span>
			<div>{{title}}</div>
			<template v-if="$slots.left">
				<slot name="left"></slot>
			</template>
		</div>
		<div class="md-cell-title-right">
			<span>{{addon}}</span>
			<template v-if="$slots.right">
				<slot name="right"></slot>
			</template>
		</div>
		
	</div>
</template>
<script>
	export default {
		name: 'ynet-cell-title',
		props: {
			type: {
				type: String,
				default: ''
			},
			hasLine: {
				type: Boolean,
				default: true
			},
			title: {
				type: String,
				default: ''
			},
			addon: {
				type: String,
				default: ''
			}
		}
	}
</script>
<style lang="stylus">
.md-cell-title
	font-size cs-cell-title-font-size
	height cs-cell-title-height
	display flex
	align-items center
	background-color cs-cell-title-default-fill
	justify-content space-between

	.md-cell-title-line
		display inline-block
		width cs-cell-title-line-width
		height cs-cell-title-line-height
		background-color cs-color-main
		border-radius 25px
		margin-right h-gap-md

	.md-cell-title-left
		display flex
		align-items center
		padding-left h-gap-md
	.md-cell-title-right
		padding-right h-gap-md
		color cs-color-text-minor

&.md-cell-no-line
	.md-cell-title-left
		font-size cs-font-body-large
		color cs-color-text-body

&.plain
	background-color transparent
&.origin
	background-color cs-color-light-origin
	border-radius cs-radius-normal cs-radius-normal 0 0
	.md-cell-title-left
		color #E09524
</style>
